<template>
  <div class="h-full flex flex-col">
    <vxe-card title="" class="w-full" :border="false">
      <AuForm
        ref="formRef"
        labelWidth="60px"
        :formList="formList"
        :hiddenBtn="true"
        @submit="search"
      />
    </vxe-card>

    <div class="mt-[16px] flex-grow overflow-hidden">
      <au-table
        ref="tableRef"
        v-bind="gridRecordOption"
        @actionClick="actionClick"
      >
        <template #topWrap>
          <div class="text-[#242930]">
            <span class="text-[--autata-font-gray-color]">{{
              t("device_manage.form.lock_unlock_record")
            }}</span>
          </div>
        </template>
        <template #store_default="{ row }">
          {{ storeKeyValue[row.storeId] }}
        </template>
      </au-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onMounted, reactive, ref } from "vue";
import { getStoreList } from "@/api/teaInfuser/store";
import { deviceLockRecord } from "@/api/teaInfuser/device";
import { useGlobal } from "@pureadmin/utils";
import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
import { emitter } from "@/utils/mitt";
import { AuTable } from "@/components/AuTable";
import { ACTION_TYPE, PropDefines } from "@/components/AuTable/type";
import { GetListParamProp } from "@/api/user";
import { AuForm } from "@/components/AuForm";
import { selectProps } from "@/components/AuForm/type";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

defineOptions({
  name: "DeviceLockRecord"
});

const route = useRoute();
const { $storage } = useGlobal<GlobalPropertiesApi>();
const router = useRouter();

const tableRef = ref();
const storeKeyValue = ref({});
let deviceStatus = "";

const formList = ref<[selectProps]>([
  {
    type: "select",
    label: "device_manage.form.operation",
    labelWidth: 40,
    key: "deviceStatus",
    placeholder: "device_manage.form.select_operation",
    labelKey: "label",
    valueKey: "value",
    emptyValues: [null, undefined],
    options: [
      {
        value: "",
        label: "device_manage.form.all"
      },
      {
        value: 1,
        label: "device_manage.form.lock"
      },
      {
        value: 0,
        label: "device_manage.form.unlock"
      }
    ],
    defaultValue: deviceStatus,
    onChange: (val: string) => {
      deviceStatus = val;
      search();
    }
  }
]);
const gridRecordOption = reactive<PropDefines>({
  isServerPage: false,
  columns: [
    { field: "deviceId", title: "device_manage.form.device_code" },
    {
      field: "storeId",
      title: "device_manage.form.store_name",
      slots: {
        default: "store_default"
      }
    },
    {
      field: "deviceStatus",
      title: "device_manage.form.operation_status",
      formatter({ cellValue }) {
        return !cellValue
          ? t("device_manage.form.unlock")
          : t("device_manage.form.lock");
      }
    },
    { field: "note", title: "device_manage.form.lock_reason" },
    {
      field: "createTime",
      title: route.query.status
        ? "device_manage.form.unlock_time"
        : "device_manage.form.lock_record"
    }
  ],
  dataSource: [],
  actions: [ACTION_TYPE.REFRESH],
  fetchConfig: {
    query: {
      service: (
        params: GetListParamProp<{ version: string; deviceLockRecord: object }>
      ) => {
        const { start_page, size, ...rest } = params;
        console.log(rest);
        params = {
          start_page: start_page ?? 1,
          size: size ?? 0,
          deviceLockRecord: rest
        };

        return deviceLockRecord(params);
      },
      param: () => {
        return {
          // deviceId: Number(route.query["id"]),
          deviceStatus: deviceStatus
          // ...formRef.value.getFormData()
        };
      }
    }
  }
});

const formRef = ref();

const toPrevPage = () => {
  router.go(-1);
};

const getStoreData = async () => {
  const res = await getStoreList({
    start_page: 1,
    size: 0
  });
  for (const item of res.data) {
    console.log(item);
    storeKeyValue.value[item.id] = item.name;
  }
};

function storageConfigureChange<T>(key: string, val: T): void {
  const storageConfigure = $storage.configure;
  storageConfigure[key] = val;
  // $storage.configure = storageConfigure;
}

const search = () => {
  tableRef.value.refresh();
};

const actionClick = ({ key }) => {
  switch (key) {
    case ACTION_TYPE.REFRESH:
      search();
      break;
    // case ACTION_TYPE.DOWNLOAD:
    //   const $table = tableRef.value.vxeGridRef;
    //   $table.exportData({
    //     filename: t("device_manage.form.device_operation_record"),
    //     type: "csv",
    //     isHeader: true
    //   });
  }
};

onBeforeMount(() => {
  getStoreData();
});

// onMounted(() => {
//   storageConfigureChange("hideTabs", true);
//   emitter.emit("tagViewsChange", true as unknown as string);
// });
//
// onBeforeRouteLeave((to, from, next) => {
//   storageConfigureChange("hideTabs", false);
//   emitter.emit("tagViewsChange", false as unknown as string);
//   next();
// });
</script>

<style lang="scss" scoped>
.device-table {
  :deep(table) {
    background: #f5f9ff !important;
  }

  :deep(.el-table th.el-table__cell) {
    background: #f5f9ff;
  }

  :deep(.el-table tr) {
    background: #f5f9ff;
  }
}
</style>
